<template>
  <div class="orders-container">
    <h1>订单列表</h1>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="100" />
      <el-table-column prop="user" label="用户" width="120" />
      <el-table-column prop="product" label="产品" width="200" />
      <el-table-column prop="amount" label="金额" width="100" />
      <el-table-column prop="date" label="下单日期" width="150" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// Mock order data
const orders = ref([
  {
    id: '20230001',
    user: '张三',
    product: '粤语歌词解析服务',
    amount: '199.00',
    date: '2023-05-20',
    status: '已完成'
  },
  {
    id: '20230002',
    user: '李四',
    product: '粤语歌词解析服务',
    amount: '299.00',
    date: '2023-05-21',
    status: '处理中'
  },
  {
    id: '20230003',
    user: '王五',
    product: '粤语歌词解析服务',
    amount: '399.00',
    date: '2023-05-22',
    status: '已取消'
  }
]);

const getTagType = (status) => {
  const map = {
    '已完成': 'success',
    '处理中': 'primary',
    '已取消': 'danger'
  };
  return map[status] || 'info';
};

const handleDetail = (row) => {
  ElMessage.info(`查看订单详情: ${row.id}`);
};
</script>

<style scoped>
.orders-container {
  padding: 20px;
}
</style> 